<script setup lang="ts">
import { uploadPageList} from "@/services/uploadApi.ts";
import {computed, nextTick, onMounted, reactive, ref} from "vue";
import type {UploadListItemType, UploadPageListType} from "@/types/UploadType.ts";
import {tableBorder} from "@/utils/border/table-border.ts";
import Upload from "@/pages/system/upload/upload.vue";
import useLargeFileStore from "@/stores/modules/useLargeFileStore.ts";
import {Message} from "@arco-design/web-vue";

const {startDownload, pauseDownload, resumeDownload, getDownloadProgress} = useLargeFileStore()

const uploadRef = ref<{
  init: () => void;
}>()

const modalOptions = reactive({
  visible: false,
  title: '',
  text: '暂停'
})

const formData = reactive<UploadPageListType>({
  current: 1,
  size: 10,
  data: {
    status: 1,
    fileName: ''
  }
})


const data = ref<UploadListItemType[]>([])

// 获取列表
function queryData () {
  uploadPageList(formData).then(res => {
    if (res.code === 200) {
      data.value = res.data
    }
  })
}

// 查询
const handleSearch = () => {
  formData.current = 1
  queryData()
}

// 重置
const handleReset = () => {
  formData.data.fileName = ''
  formData.data.status = 1
  handleSearch()
}
// 下载
const handleDownload = async (row: UploadListItemType) => {
  modalOptions.visible = true
  modalOptions.title = row.fileName
  startDownload(row.id, row.fileSize ,row.fileName, () => {
    nextTick(() => {
      Message.success('文件下载完成')
      modalOptions.visible = false
    })
  })
  modalOptions.text = '暂停'
}

const handleUpload = () => {
  uploadRef.value?.init()
}

onMounted(() => {
  queryData()
})

const columns = computed(() => {
  const cs = [
    {
      title: "序号",
      dataIndex: "index",
      align: "center",
      slotName: "index",
    },
    {
      title: "文件名称",
      dataIndex: "fileName",
      align: "center",
    },
    {
      title: "文件类型",
      dataIndex: "fileType",
      align: "center",
    },
    {
      title: "文件大小",
      dataIndex: "fileSize",
      align: "center",
    },
    {
      title: "文件状态",
      dataIndex: "status",
      align: "center",
      slotName: "status",
    },
    {
      title: "操作",
      align: "center",
      slotName: "operate",
    }
  ]
  return cs;
})

const getColor = (status: 0 | 1 | null) => {
  // 根据状态返回不同的type
  switch (status) {
    case 0:
      return "#f53f3f";
    case 1:
      return "#00b42a";
  }
};

function getStatusString(status: 0 | 1 | null) {
  if (status === 1) {
    return "正常";
  }
  if (status === 0) {
    return "禁用";
  }
  if (status === null) {
    return "暂无";
  }
}

const handleModalClose = () => {
  // pauseDownload()
  modalOptions.visible = false
}

const handleModalOk = () => {
  if (modalOptions.text === '暂停') {
    modalOptions.text = '继续'
    pauseDownload()
  } else {
    modalOptions.text = '暂停'
    resumeDownload(() => {
      nextTick(() => {
        Message.success('文件下载完成')
        modalOptions.visible = false
      })
    })
  }
}
</script>

<template>
  <a-space
      class="container"
      direction="vertical"
  >
    <a-card>
      <a-form
          label-align="left"
          auto-label-width
      >
        <a-row :gutter="24">
          <a-col
              :xs="24"
              :sm="24"
              :md="12"
              :lg="6"
              :xl="6"
              :xxl="6"
          >
            <a-form-item label="文件名称">
              <a-input v-model="formData.data.fileName" />
            </a-form-item>
          </a-col>
          <a-col
              :xs="24"
              :sm="24"
              :md="12"
              :lg="6"
              :xl="6"
              :xxl="6"
          >
            <a-form-item label="文件状态">
             <a-switch
                 :checked-value="1"
                 :unchecked-value="0"
                 v-model="formData.data.status"
             >
               <template #checked>
                 正常
               </template>
               <template #unchecked>
                 禁用
               </template>
             </a-switch>
            </a-form-item>
          </a-col>
          <a-col
              :xs="24"
              :sm="24"
              :md="12"
              :lg="6"
              :xl="6"
              :xxl="6"
          >
            <a-space>
              <a-button type="primary" @click="handleSearch">
                <template #icon>
                  <icon-search />
                </template>
                查询
              </a-button>
              <a-button @click="handleReset">
                <template #icon>
                  <icon-refresh />
                </template>
                重置
              </a-button>
            </a-space>
          </a-col>
        </a-row>
      </a-form>
    </a-card>
    <a-card>
      <div class="tabletools">
        <a-button type="primary" @click="handleUpload">
          <template #icon>
            <icon-import />
          </template>
          上传大文件
        </a-button>
      </div>
      <a-table
          :bordered="tableBorder"
          :columns="columns"
          :data="data"
      >
        <template #status="{record}">
          <a-tag :color="getColor(record.status)">{{ getStatusString(record.status) }}</a-tag>
        </template>

        <template #operate="{record}">
          <a-button type="primary" @click="handleDownload(record)">
            下载
          </a-button>
        </template>
      </a-table>
    </a-card>

    <a-modal
        @cancel="handleModalClose"
        @close="handleModalClose"
        :visible="modalOptions.visible"
        :title="modalOptions.title"
        :ok-text="modalOptions.text"
        @ok="handleModalOk"
    >
      <a-progress :percent="getDownloadProgress() / 100" />
    </a-modal>
    <upload ref="uploadRef" @list="queryData"></upload>
  </a-space>
</template>

<style scoped lang="scss">

</style>